맨위로가기

리액트 (자바스크립트 라이브러리)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

리액트(React)는 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리이다. 조던 워크가 개발하여 2013년 오픈 소스화되었으며, 페이스북의 뉴스피드와 인스타그램닷컴에 처음 적용되었다. 주요 특징으로는 선언적 UI, 컴포넌트 기반 개발, 가상 DOM, 단방향 데이터 바인딩, 그리고 상태 관리를 들 수 있으며, JSX 문법을 사용하여 UI를 정의한다. 리액트 네이티브를 통해 네이티브 앱 개발에도 활용되며, Vue.js, jQuery, AngularJS 등 다른 프레임워크와 비교되기도 한다. 초기에 MIT 라이선스를 사용했으나, 라이선스 관련 논쟁을 거쳐 MIT 라이선스로 변경되었다.

더 읽어볼만한 페이지

  • 페이스북 소프트웨어 - HHVM
    HHVM은 페이스북에서 개발한 PHP 및 Hack 언어 실행 엔진으로, JIT 컴파일을 통해 높은 성능을 제공하며 웹 개발 분야에 새로운 가능성을 제시했다.
  • 페이스북 소프트웨어 - 페이스북 메신저
    페이스북 메신저는 2008년 페이스북 채팅으로 시작하여 2011년 독립적인 모바일 앱으로 출시된 페이스북의 인스턴트 메시징 서비스로, 다양한 기능 추가와 논란 속에서도 꾸준히 성장하여 2020년에는 메신저 룸을 출시하고 COVID-19 팬데믹 기간 동안 메시지 트래픽이 크게 증가했다.
  • Ajax - 구글 문서도구
    구글 문서도구는 구글에서 제공하는 웹 기반 워드 프로세서로, 문서 작성, 편집, 공유 기능을 제공하며, 다양한 문서 형식 지원, 실시간 공동 작업, 머신러닝 기반 기능을 제공하고, 구글 드라이브를 통해 문서 및 파일을 함께 이용할 수 있다.
  • Ajax - AngularJS
    AngularJS는 동적 웹 애플리케이션 개발을 용이하게 하기 위해 설계된 오픈 소스 자바스크립트 프레임워크로, MVC 패턴 적용, 의존성 주입, HTML 확장 디렉티브 제공, 양방향 데이터 바인딩 등의 특징을 가지며, 장기 지원은 종료되었지만 웹 개발에 중요한 영향을 미쳤다.
  • 2015년 소프트웨어 - 알파고
    알파고는 구글 딥마인드가 개발한 인공지능 바둑 프로그램으로, 심층 신경망과 몬테카를로 트리 탐색 알고리즘을 결합하여 자가 학습을 통해 인간을 뛰어넘는 바둑 실력을 달성하며 인공지능 기술 발전과 사회적 영향에 대한 논의를 촉발했다.
  • 2015년 소프트웨어 - 구글 포토
    구글 포토는 사진 및 동영상 저장, 공유, 관리 기능을 제공하는 구글의 클라우드 기반 서비스로, 자동 분류, 얼굴 인식, 검색 기능을 제공하지만 2021년부터 무료 무제한 저장 용량 제공 정책이 변경되었고, 2024년에는 기술의 군사적 이용에 대한 윤리적 논란이 있었다.
리액트 (자바스크립트 라이브러리) - [IT 관련 정보]에 관한 문서
기본 정보
React 로고
React 로고
개발자Meta와 커뮤니티
최초 릴리스2013년 5월 29일
최신 안정화 버전 출시일( }})
기술 정보
프로그래밍 언어자바스크립트
운영 체제크로스 플랫폼
플랫폼크로스 플랫폼
종류자바스크립트 라이브러리
라이선스MIT 허가서
웹사이트
공식 웹사이트React 공식 웹사이트

2. 역사

리액트는 페이스북 내부에서 소프트웨어 엔지니어 조던 워크(Jordan Walke)에 의해 개발되어 2011년 뉴스피드에 처음 적용되었다.[54][55] 2013년 5월 오픈 소스로 공개된 이후 꾸준히 발전하며 주요 자바스크립트 라이브러리로 자리 잡았다.

2. 1. 개발 배경

리액트는 페이스북의 소프트웨어 엔지니어인 조던 워크(Jordan Walke)에 의해 개발되었다. PHP를 위한 HTML 컴포넌트 프레임워크인 XHP영어의 영향을 받았다.[18] 2011년에 페이스북 뉴스 피드에서 처음 사용되었고, 2012년에는 인스타그램에서도 사용되었다.[19] 2013년 5월 JSConf US에서 오픈 소스화되었다.

2. 2. 오픈 소스화 및 발전

리액트는 2013년 5월 JSConf US에서 오픈 소스화되었다.

2015년 2월에는 리액트 네이티브가 발표되었고, 3월에 오픈 소스화되었다. 리액트 네이티브는 안드로이드, iOS, UWP 환경에서 리액트를 사용해 네이티브 애플리케이션 개발을 가능하게 한다.

2017년 4월 17일에는 새로운 핵심 알고리즘인 React Fiber가 발표되었다.[20] 이는 사용자 인터페이스 구축 방식을 개선하고, 향후 리액트 프레임워크 발전의 기반이 되었다.[21]

주요 버전 출시 이력은 다음과 같다.

버전
버전출시일
0.3.02013년 5월 29일
0.4.02013년 7월 20일
0.5.02013년 10월 20일
0.8.02013년 12월 20일
0.9.02014년 2월 20일
0.10.02014년 3월 21일
0.11.02014년 7월 17일
0.12.02014년 11월 21일
0.13.02015년 3월 10일
0.14.12015년 10월 29일
15.0.02016년 4월 7일
15.1.02016년 5월 20일
15.2.02016년 7월 1일
15.3.02016년 7월 30일
15.3.12016년 8월 19일
15.4.02016년 11월 16일
15.4.12016년 11월 23일
15.4.22017년 1월 6일
15.5.02017년 4월 7일
15.5.42017년 4월 11일
15.6.02017년 6월 13일
16.0.02017년 9월 26일
16.1.02017년 11월 9일
16.3.02018년 3월 29일
16.3.12018년 4월 3일
16.3.22018년 4월 16일
16.4.02018년 5월 24일
16.5.02018년 9월 5일
16.6.02018년 10월 23일
16.7.02018년 12월 20일
16.8.02019년 2월 6일
16.8.62019년 3월 27일
16.9.02019년 8월 9일
16.10.02019년 9월 27일
16.10.12019년 9월 28일
16.10.22019년 10월 3일
16.11.02019년 10월 22일
16.12.02019년 11월 14일
16.13.02020년 2월 26일
16.13.12020년 3월 19일
16.14.02020년 10월 14일
17.0.02020년 10월 20일
17.0.12020년 10월 22일
17.0.22021년 3월 22일
18.0.02022년 3월 29일
18.1.02022년 4월 26일
18.2.02022년 6월 14일


2. 3. 라이선스 논쟁

2013년 5월 처음 일반에 공개되었을 때는 표준 아파치 2.0 라이선스를 사용했다. 2014년 10월에 공개된 React 버전 0.12.0부터는 페이스북 관련 특허 사용을 허가하는 ''PATENTS'' 텍스트 파일이 추가된, 특허 조항이 있는 수정된 BSD 라이선스로 라이선스를 변경했다.[22]

이 특허 조항은 페이스북 및 관련 기업에 대해 특허 침해 소송을 제기할 경우 React 사용 권리가 취소된다는 내용을 담고 있어, 사용자 커뮤니티 내에서 논쟁을 불러일으켰다.[23][24]

커뮤니티의 피드백을 받아들여, 2015년 4월 페이스북은 특허 허가와 관련된 모호한 부분을 줄이고 더 관대한 내용으로 조항을 수정했다.[25] 그러나 2017년 8월, 아파치 소프트웨어 재단은 해당 특허 조항이 아파치 라이선스와 호환되지 않는다며 페이스북에 라이선스 변경을 요구했다. 페이스북은 이 요구를 거부했다.[23] 이에 다음 달, 워드프레스는 자사의 주요 프로젝트인 ''구텐베르크''(Gutenberg)와 ''칼립소''(Calypso)에서 React 사용을 중단하기로 결정했다.[26]

결국 2017년 9월 23일, 페이스북은 ''Flow'', ''Jest'', ''React'', ''Immutable.js'' 네 가지 프로젝트의 라이선스를 표준 MIT 라이선스로 변경하겠다고 발표했다.[27] 페이스북은 React가 "웹용 오픈 소스 소프트웨어의 다양한 생태계 기반"이며, "기술적인 문제 외의 다른 이유로 그 발전을 늦추고 싶지 않다"라고 설명하며 라이선스 변경 이유를 밝혔다.[28]

같은 달 26일, React 버전 16.0.0이 표준 MIT 라이선스로 정식 출시되었다.[29] 이 변경 사항은 이전 버전인 15.x 계열에도 적용되어, React 버전 15.6.2로 백포트(backport)되었다.[30]

3. 주요 특징

리액트(React)는 사용자 인터페이스(UI) 구축을 위한 자바스크립트 라이브러리로, 다음과 같은 주요 특징을 가진다.

첫째, 클라이언트 사이드 렌더링을 기본으로 한다. 과거에는 PHP, Java, Ruby 같은 서버 측 언어가 HTML 생성을 주도했지만, 리액트는 브라우저에서 동작하는 자바스크립트JSX 문법을 사용해 페이지 로딩 후 동적으로 HTML 요소를 삽입한다. 이를 통해 사용자 경험을 향상시킬 수 있다. (다만, 최근에는 리액트 서버 컴포넌트(RSC) 기능을 통해 서버 사이드 렌더링도 지원한다.)

둘째, 컴포넌트 기반 방식을 채택한다. UI를 독립적이고 재사용 가능한 여러 조각(컴포넌트)으로 나누어 개발하므로, 기존의 jQuery 방식보다 코드 관리가 용이하고 대규모 애플리케이션 개발에 유리하다.

셋째, 가상 DOM을 사용하여 성능을 최적화한다. 실제 DOM을 직접 조작하는 대신 메모리상의 가상 DOM을 먼저 업데이트하고, 변경된 부분만 실제 DOM에 효율적으로 반영한다. 이는 Vue.js 등 다른 최신 프레임워크에서도 사용되는 방식이다.

리액트는 단독으로 사용할 수도 있지만, 동적인 웹 페이지 구축을 위해 서버 측 처리 기술인 Node.js나 이를 기반으로 한 프레임워크 Next.js와 함께 사용하는 경우가 많다. 또한, 실제 개발 환경에서는 자바스크립트 대신 정적 타입을 지원하는 TypeScript를 사용하여 트랜스파일하는 방식이 널리 쓰인다.

리액트는 싱글 페이지 애플리케이션(SPA) 형태의 웹 앱 개발뿐만 아니라, React Native를 통해 모바일 애플리케이션 개발에도 활용될 수 있다. 복잡한 애플리케이션을 개발할 때는 상태 관리, URL 매핑, API 연동 등을 위한 추가적인 라이브러리가 필요할 수 있다[3].

3. 1. 선언적 프로그래밍 및 JSX

React는 선언적 UI(템플릿) 작성을 위해 JSX|제이에스엑스영어라는 특별한 문법을 사용한다. JSX는 자바스크립트 구문에 대한 확장으로[9], XML과 유사한 문법을 사용하여 ECMAScript를 확장한다.[58] 많은 개발자에게 친숙한 HTML과 비슷한 모습을 하고 있어, 이를 통해 컴포넌트 렌더링 구조를 쉽게 만들 수 있다.[58][10] React 컴포넌트는 주로 JSX를 사용하여 작성되지만, 필수는 아니며 순수 자바스크립트로도 작성할 수 있다.[10] JSX는 페이스북(현 메타 플랫폼스)이 PHP를 위해 개발한 다른 확장 문법인 XHP와 유사하다.[58]

다음은 JSX 코드의 기본적인 예시이다.



const App = () => {

return (



Header



Content



Footer





);

};



JSX 문법의 주요 특징은 다음과 같다.

; 중첩된 요소

HTML처럼 요소를 중첩하여 사용할 수 있다. 단, 같은 레벨에 여러 요소를 배치하려면 위 예시의 `
` 태그처럼 하나의 부모 요소로 감싸거나, 배열 형태로 반환해야 한다.[59][11]

; 속성(Attributes)

JSX는 HTML의 속성과 유사한 방식으로 요소의 속성을 정의할 수 있다. 사용자 정의 속성을 만들어 컴포넌트에 데이터를 전달하는 것도 가능하다.[60][12] 컴포넌트는 이렇게 전달받은 모든 속성을 `props`라는 객체를 통해 접근할 수 있다.

; 자바스크립트 표현식(JavaScript expressions)

JSX 코드 내에서 중괄호 `{}`를 사용하면 자바스크립트 표현식(단, 은 아님)을 삽입할 수 있다.[12]



{10 + 1}





위 코드는 `10 + 1`의 결과인 `11`을 `

` 태그 안에 렌더링한다.



11





; 조건문

JSX 내에서는 일반적인 If 문을 직접 사용할 수 없지만, 삼항 연산자와 같은 조건식을 활용하여 조건부 렌더링을 구현할 수 있다.



class App extends React.Component {

render() {

const i = 1;

return (



{ i === 1 ? 'true' : 'false' }





);

}

}



위 예제는 변수 `i`의 값이 1이므로 `'true'`라는 문자열을 렌더링한다.

함수와 JSX를 함께 사용하여 더 복잡한 조건부 렌더링도 가능하다. 예를 들어, 배열 데이터를 기반으로 여러 요소를 동적으로 생성할 수 있다.



class App extends React.Component {

render() {

const sections = [1, 2, 3];

return (



{

sections.length > 0

? sections.map(n =>
Section {n}
)

: null

}



);

}

}



위 코드는 `sections` 배열의 각 요소를 순회하며 `
Section 1
`, `
Section 2
`, `
Section 3
`을 렌더링한다.





Section 1


Section 2


Section 3






JSX로 작성된 코드는 웹 브라우저가 직접 이해할 수 없으므로, 실행되기 전에 Babel과 같은 트랜스파일러 도구를 사용하여 일반 자바스크립트 코드로 변환하는 과정이 필요하다.[61][13] 이 변환 작업은 일반적으로 애플리케이션을 사용자에게 배포하기 전, 빌드 과정에서 수행된다.

다음은 JSX와 자바스크립트를 함께 사용하여 HTML 페이지에 "Hello World!"를 출력하는 기초적인 예제이다.









이 코드가 웹 브라우저에서 실행되면 `myReactApp` ID를 가진 `div` 요소 내부에 다음과 같이 `

Hello World!

`가 삽입된다.





Hello World!






3. 2. 컴포넌트 기반 개발

리액트의 주요 특징 중 하나는 컴포넌트 기반 개발 방식을 채택했다는 점이다.[3] 이는 사용자 인터페이스(UI)를 독립적이고 재사용 가능한 여러 조각으로 나누어 개발하는 방식이다.

기존의 jQuery 등과 비교하여, 리액트는 컴포넌트 단위로 요소별 개발이 가능하며, 코드의 재사용성이 높고 유지보수가 용이하여 대규모 개발에 적합하다.

리액트 컴포넌트는 일반적으로 JSX 문법을 사용하여 작성되지만, 반드시 필요한 것은 아니며 순수 자바스크립트만으로도 작성할 수 있다.[58] 컴포넌트를 만드는 방식에는 함수형 컴포넌트와 클래스형 컴포넌트가 있으며, 리액트의 주요 기능 중 하나로 컴포넌트화(함수 컴포넌트)가 언급된다.

3. 3. 가상 DOM (Virtual DOM)

React의 주요 기능 중 하나는 가상 문서 객체 모델(Virtual DOM)을 사용하는 것이다. 가상 DOM은 실제 DOM을 직접 조작하는 대신, 메모리 안에 DOM 구조의 복사본, 즉 일종의 캐시를 만들어 두는 방식이다.[57][7]

애플리케이션의 상태가 변경되면, React는 먼저 이 가상 DOM을 업데이트한다. 그런 다음, 이전 가상 DOM 상태와 현재 가상 DOM 상태를 비교하여 실제로 변경된 부분만을 계산한다. 마지막으로, 이 계산된 차이점만 실제 브라우저의 DOM에 적용하여 화면을 업데이트한다.[57][7]

이러한 방식은 실제 DOM을 직접 빈번하게 조작하는 것보다 훨씬 효율적인 렌더링을 가능하게 한다. 실제 DOM 조작은 상대적으로 느리고 많은 자원을 소모하기 때문이다. 가상 DOM을 사용하면 변경되지 않은 부분은 그대로 두고, 꼭 필요한 최소한의 변경만 실제 DOM에 반영하므로 성능상의 이점을 얻을 수 있다. Vue.js와 같은 다른 라이브러리들도 이러한 가상 DOM 방식을 채택하고 있다.

프로그래머 입장에서는 마치 상태가 변경될 때마다 전체 페이지가 다시 렌더링되는 것처럼 코드를 작성할 수 있다는 장점이 있다. 복잡한 DOM 업데이트 로직을 직접 관리할 필요 없이, React 라이브러리가 내부적으로 변경된 하위 컴포넌트만을 효율적으로 찾아 렌더링해주기 때문이다.[57][7]

3. 4. 단방향 데이터 바인딩

리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 이때 사용되는 것이 속성(property)이며, 일반적으로 ''props''라고 부른다.[56][6] 컴포넌트는 이 ''props''를 불변하는 자바스크립트 객체 형태로 받는다.[56][6]

3. 5. 상태 관리 (Stateful Components)



);

}

}



복잡한 React 애플리케이션에서는 여러 컴포넌트 간의 상태 공유 및 관리가 중요해지며, 이러한 경우 상태 관리를 위한 추가적인 라이브러리(예: Redux, Zustand)를 사용하는 것이 일반적이다[3].

3. 6. 라이프사이클 메서드 (Lifecycle Methods)

라이프사이클 메서드는 컴포넌트의 생존 기간 동안 설정된 지점에서 코드를 실행할 수 있도록 하는 훅이다. 주요 라이프사이클 메서드는 다음과 같다.

  • shouldComponentUpdate: 개발자가 컴포넌트의 불필요한 재렌더링을 방지할 수 있도록 한다. 렌더링이 필요하지 않은 경우 false를 반환하여 재렌더링을 방지할 수 있다.
  • componentDidMount: 컴포넌트가 마운트(mount)될 때(즉, 사용자 인터페이스에 생성될 때) 한 번 호출된다. 주로 API를 통해 원격 소스에서 데이터를 불러오는 작업을 시작할 때 사용된다.
  • render: 가장 중요한 라이프사이클 메서드이자 모든 컴포넌트에서 반드시 필요한 메서드이다. 일반적으로 컴포넌트의 상태가 업데이트될 때마다 호출되어 사용자 인터페이스에 변경 사항을 반영한다.

4. 다른 프레임워크와의 비교

리액트와 비슷한 위치에서 경쟁하는 주요 프레임워크로는 Vue.js, jQuery, AngularJS 등이 있다.


  • Vue.js: 리액트처럼 클라이언트 측 JavaScript를 사용하는 UI 라이브러리라는 공통점이 있다. 하지만 JSX 대신 PHP 스타일의 표기법으로 HTML을 변경하고, 양방향 바인딩을 지원한다는 차이가 있다. 주로 중소 규모 프로젝트에서 사용하기 용이하다는 평가를 받는다.[4] 리액트와 마찬가지로 가상 DOM 개념을 채택하여 성능을 최적화한다.

  • jQuery: 2006년에 등장한 라이브러리로, 리액트보다 역사가 길다. DOM 조작을 통해 HTML을 동적으로 생성하는 클라이언트 측 JavaScript 라이브러리라는 점은 리액트와 유사하다. 그러나 UI 조작 방식이 모델-뷰-컨트롤러(MVC) 아키텍처 개념 이전에 설계되어, 데이터의 일관된 관리가 상대적으로 어렵다는 특징이 있다.[5] 2000년대 후반부터 2010년대 초반까지 웹 개발에서 매우 널리 사용되었다. 리액트가 컴포넌트 기반으로 대규모 개발에 유리한 것과 비교된다.

  • AngularJS: 2009년에 등장했으며, MVC 아키텍처를 채택한 클라이언트 측 JavaScript 라이브러리이다. 구글(Google)과 커뮤니티가 개발을 주도했지만, 2022년에 공식적인 지원이 종료되었다.

5. 리액트 네이티브 (React Native)

리액트 네이티브2015년 페이스북에 의해 발표되었으며[65], 리액트 아키텍처를 네이티브 안드로이드[66], iOS, UWP[67][39][40] 애플리케이션 개발에 적용하는 기술이다. 웹 개발에 사용되는 리액트의 개념과 문법을 활용하여 여러 운영체제에서 동작하는 네이티브 앱을 만들 수 있게 해준다.

5. 1. 개요

React는 클라이언트 사이드에서 동작하는 자바스크립트 라이브러리로, 컴포넌트 기반 아키텍처와 가상 DOM을 사용하여 사용자 인터페이스(UI) 개발을 효율적으로 만든다.

2015년 2월 페이스북은 React 아키텍처를 네이티브 모바일 애플리케이션 개발에 적용하는 리액트 네이티브를 React.js Conf에서 발표했다.[65][38] 리액트 네이티브는 안드로이드[66], iOS, UWP[67][39][40] 플랫폼을 지원하여, 웹 개발 기술인 React를 이용해 다양한 운영체제의 네이티브 앱을 개발할 수 있게 한다. 이는 같은 해 3월에 오픈 소스로 전환되었다.

React는 싱글 페이지 애플리케이션(SPA) 웹 앱 개발뿐만 아니라, 리액트 네이티브를 통해 모바일 앱 개발의 기반으로도 활용된다. 복잡한 애플리케이션 개발 시에는 상태 관리, URL 매핑, API 연동 등을 위한 추가 라이브러리가 필요할 수 있다.[3]

5. 2. 개발 배경

리액트페이스북의 소프트웨어 엔지니어인 조던 워크(Jordan Walke)가 개발했다. 그는 PHP를 위한 HTML 컴포넌트 프레임워크인 XHP의 영향을 받았다.[18] 2011년 페이스북 뉴스 피드에서 처음 사용되었고, 2012년에는 인스타그램에서도 사용되었다.[19] 2013년 5월 JSConf US에서 오픈 소스화되었다.

리액트 네이티브의 개발은 페이스북이 모바일 개발에서 겪었던 문제점을 해결하려는 과정에서 시작되었다. 2012년, 페이스북의 회장 겸 CEO인 마크 저커버그는 "기업으로서의 가장 큰 실패는 네이티브 반대론으로 HTML5에 크게 투자했던 것이다."라고 언급하며, 더 나은 모바일 경험을 제공하겠다고 약속했다.[41]

이후 페이스북 내부에서 조던 워크는 자바스크립트로 작성된 웹 앱에서 iOS의 사용자 인터페이스(UI)를 생성하는 시스템의 프로토타입을 만들었다.[42] 이를 바탕으로 리액트 기반의 웹 앱에서 네이티브 모바일 앱을 구축하기 위한 사내 해커톤이 열렸다.[42]

몇 달간의 개발 끝에, 페이스북은 2015년 2월 React.js Conf에서 리액트 네이티브의 첫 번째 버전을 발표했다.[38] 당시 기술 발표에서 크리스토퍼 체듀(Christopher Chedeau)는 페이스북이 그룹 앱과 광고 관리 앱에 이미 리액트 네이티브를 사용하고 있다고 설명했다.[43][38] 리액트 네이티브는 안드로이드[66], iOS, UWP[67] 환경에서 리액트를 이용한 네이티브 애플리케이션 개발을 가능하게 한다. 리액트 네이티브는 발표 직후인 2015년 3월에 오픈 소스화되었다.

5. 3. 작동 원리

리액트 네이티브는 기본적으로 리액트와 동일한 원리로 작동하지만, 웹 기술 대신 네이티브 API를 사용하여 사용자 인터페이스(UI)를 렌더링한다는 점에서 차이가 있다. 리액트 네이티브는 개발자가 작성한 자바스크립트 코드를 해석하는 백그라운드 프로세스를 통해 최종 사용자 기기에서 직접 실행된다. 이 백그라운드 프로세스는 직렬화 가능하고 비동기적이며 배치 처리된 Bridge라는 통신 인터페이스를 통해 네이티브 플랫폼과 상호작용한다.[44][45]

리액트 네이티브는 HTML5에 의존하지 않는다. 모든 코드는 자바스크립트로 작성되며, 앱의 실제 구현은 각 플랫폼의 네이티브 SDK를 활용한다. 이를 통해 안드로이드, iOS, UWP 등 다양한 운영체제에서 네이티브 앱과 같은 성능과 사용자 경험을 제공할 수 있다.

5. 4. Hello World 예제

리액트 네이티브를 이용한 기본적인 "Hello world" 예제 코드는 다음과 같다.



import React from "react";

import { AppRegistry, Text } from "react-native";

export const HelloWorldApp = () => Hello world!;

AppRegistry.registerComponent("HelloWorld", () => HelloWorldApp);


6. 비평

리액트의 주요 특징 중 하나는 가상 문서 객체 모델(DOM), 즉 가상 DOM을 사용하는 것이다. 이는 실제 브라우저 DOM을 직접 조작하는 대신, 메모리 안에 UI 표현을 저장해두고 변경 사항이 생기면 이를 계산하여 실제 DOM에 효율적으로 반영하는 방식이다.[57] 개발자는 마치 페이지 전체가 새로 그려지는 것처럼 코드를 작성할 수 있지만, 실제로는 변경된 부분만 업데이트된다.

그러나 이러한 가상 DOM 방식에 대한 비판도 존재한다. 우선, UI 표현을 메모리에 유지하고 ReactDOM 같은 라이브러리로 실제 DOM과 동기화하는 방식 때문에 상대적으로 많은 메모리를 소모한다는 지적이 있다.[46][68]

또한, 리액트 버전 16 이후 도입된 가상 DOM 추상화 방식이 웹 브라우저의 표준 컴포넌트 모델과 잘 호환되지 않는다는 비판도 있다.[47] 이는 웹 표준 기반의 다른 라이브러리와의 호환성 문제를 일으킬 수 있다.

7. 활용 사례

리액트의 기본 구조는 웹 브라우저에서 렌더링되는 HTML을 넘어서 다양하게 적용된다. 예를 들어, 페이스북은 'canvas' 태그에 렌더링하는 동적인 차트를 구현하는 데 리액트를 활용한다.[62] 넷플릭스페이팔은 서버와 클라이언트 양쪽에서 유사한 HTML을 렌더링하기 위해 동일 구조의 적재(isomorphic loading, 서버와 클라이언트 양쪽에서 동일한 방식으로 화면을 그려내는 기법) 방식을 사용한다.[63][64]

또한, 리액트는 싱글 페이지 애플리케이션(SPA) 형태의 웹 앱을 개발하거나, React Native를 사용하여 모바일 애플리케이션을 개발하는 데에도 널리 사용된다.[3]

참조

[1] Youtube Tom Occhino and Jordan Walke: JS Apps at Facebook GW0rj4sNH2w
[2] 웹사이트 React https://ja.reactjs.o[...]
[3] 웹사이트 React Router to Redux First Router https://medium.com/a[...] 2018-01-13
[4] 웹사이트 【初心者向け】Vue.jsとは?特徴やメリット、注意点をわかりやすく解説 - カゴヤのサーバー研究室 https://www.kagoya.j[...] 2024-05-01
[5] 웹사이트 フロントエンドソフトウェアの歴史|マイクロフロントエンド入門 https://zenn.dev/sil[...] 2024-05-01
[6] 웹사이트 Props are Read-Only https://reactjs.org/[...] Facebook 2019-01-13
[7] 웹사이트 Refs and the DOM https://reactjs.org/[...] Facebook 2019-01-13
[8] 문서 이 컴포넌트는, 자주DOM노드와 관련시키고, 유저 인터페이스로 작성되고 있다
[9] 웹사이트 Draft: JSX Specification https://facebook.git[...] Facebook 2019-01-13
[10] 문서 컴포넌트는 순수한 JavaScript로 쓰여져 있는 경우도 있다
[11] 웹사이트 New render return types: fragments and strings https://reactjs.org/[...] Facebook 2017-09-26
[12] 웹사이트 Support for custom DOM attributes https://reactjs.org/[...] Facebook 2017-09-26
[13] 서적 React for Real: Front-End Code, Untangled https://www.google.c[...]
[14] 웹사이트 React Docs - 설계 원칙 - DOM 을 초월하여 https://ja.reactjs.o[...]
[15] 웹사이트 Why did we build React? https://reactjs.org/[...] 2013-06-05
[16] 웹사이트 Isomorphic React Apps with React-Engine https://www.paypal-e[...] 2015-04-27
[17] 웹사이트 Netflix Likes React https://medium.com/n[...] Netflix Technology Blog 2015-01-28
[18] 웹사이트 How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook? https://www.quora.co[...] 2015-02-12
[19] Youtube Pete Hunt A0Kj49z6WdM
[20] 웹사이트 Facebook announces React Fiber, a rewrite of its React framework https://techcrunch.c[...] TechCrunch 2017-04-18
[21] 웹사이트 React Fiber Architecture https://github.com/a[...] GitHub 2019-01-13
[22] 웹사이트 0.12.0 (October 28, 2014) https://github.com/f[...] GitHub 2019-01-13
[23] 웹사이트 Facebook、React.jsのライセンスを維持 - Apacheとの衝突を回避せず https://news.mynavi.[...] マイナビニュース 2017-08-22
[24] 웹사이트 A compelling reason not to use ReactJS https://medium.com/b[...] 2015-05-25
[25] 웹사이트 Updating Our Open Source Patent Grant https://code.fb.com/[...] Facebook 2015-04-10
[26] 웹사이트 Facebookの特許条項のリスクを嫌い、WordPressがReactライブラリの利用を止めることを発表 https://jp.techcrunc[...] TechCrunch Japan 2017-09-19
[27] 웹사이트 Relicensing React, Jest, Flow, and Immutable.js https://code.fb.com/[...] Facebook 2017-09-22
[28] 웹사이트 Facebook、ReactのライセンスをMITに変更の意向 https://news.mynavi.[...] マイナビニュース 2017-09-29
[29] 웹사이트 MIT licensed https://reactjs.org/[...] Facebook 2017-09-26
[30] 웹사이트 React v15.6.2 https://reactjs.org/[...] Facebook 2017-09-25
[31] 웹사이트 Meeting Notes https://discuss.reac[...] 2019-01-13
[32] 웹사이트 react Wiki https://github.com/f[...] GitHub 2019-01-13
[33] 웹사이트 Contributor License Agreement (CLA) https://reactjs.org/[...] Facebook 2019-01-13
[34] 웹사이트 In Depth Overview https://facebook.git[...] Facebook 2019-01-13
[35] 웹사이트 Flux http://nicholasjohns[...] 2019-01-13
[36] 웹사이트 The History of React and Flux with Dan Abramov https://threedevsand[...] Three Devs and a Maybe 2019-01-13
[37] 웹사이트 State Management Tools – Results https://2017.stateof[...] The State of JavaScript 2017 2019-01-13
[38] 웹사이트 React Native: Bringing modern web techniques to mobile https://code.fb.com/[...] Facebook 2019-01-13
[39] 웹사이트 React Native for Android: How we built the first cross-platform React Native app https://code.fb.com/[...] Facebook 2019-01-13
[40] 웹사이트 React Native on the Universal Windows Platform https://blogs.window[...] Microsoft 2019-01-13
[41] 웹사이트 ザッカーバーグ氏の「HTML5に賭けたのは失敗」発言には続きがある。長期的にはHTML5への期待も語る https://www.publicke[...] Publickey 2019-01-13
[42] 웹사이트 A short Story about React Native https://jobninja.com[...] JobNinja Blog 2019-01-13
[43] Youtube React.js Conf 2015 Keynote 2 - A Deep Dive into React Native https://www.youtube.[...]
[44] 웹사이트 Bridging in React Native https://tadeuzagallo[...] 2019-01-13
[45] 웹사이트 React Native vs Flutter: Which Cross-Platform Framework is Better? https://parsed.io/re[...] Parsed 2019-01-13
[46] 웹사이트 Virtual DOM and Internals https://reactjs.org/[...] Facebook 2019-01-13
[47] 웹사이트 Custom Elements Everywhere https://custom-eleme[...] 2019-01-13
[48] 웹인용 React - A JavaScript library for building user interfaces. https://reactjs.org 2018-04-07
[49] 웹인용 React: Making faster, smoother UIs for data-driven Web apps https://www.infoworl[...] 2014-05-15
[50] 웹인용 Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews https://www.infoq.co[...] 2013-06-03
[51] 웹인용 JavaScript’s History and How it Led To ReactJS https://thenewstack.[...] 2014-07-25
[52] 뉴스 How to integrate create-react-app with all the libraries you need to make a great app https://www.freecode[...] freeCodeCamp 2018-06-14
[53] 웹인용 React Router to Redux First Router https://medium.com/a[...] 2018-06-14
[54] 웹인용 React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook? https://www.quora.co[...]
[55] 웹인용 Pete Hunt at TXJS https://www.youtube.[...]
[56] 웹인용 Components and Props https://reactjs.org/[...] Facebook 2018-04-07
[57] 웹인용 Refs and the DOM https://reactjs.org/[...]
[58] 웹인용 Draft: JSX Specification https://facebook.git[...] Facebook 2018-04-07
[59] 웹인용 'React v16.0§New render return types: fragments and strings' https://reactjs.org/[...] 2017-09-26
[60] 웹인용 'React v16.0§Support for custom DOM attributes' https://reactjs.org/[...] 2017-09-26
[61] 서적 React for Real: Front-End Code, Untangled https://books.google[...] Pragmatic Bookshelf 2017-09-06
[62] 웹인용 Why did we build React? – React Blog https://facebook.git[...] 2018-11-26
[63] 웹인용 PayPal Isomorphic React https://www.paypal-e[...]
[64] 웹인용 Netflix Isomorphic React http://techblog.netf[...]
[65] 웹인용 React Native: Bringing modern web techniques to mobile https://code.faceboo[...]
[66] 웹인용 Android Release for React Native https://code.faceboo[...]
[67] 웹인용 React Native on the Universal Windows Platform https://blogs.window[...] 2016-11-06
[68] URL https://reactjs.org/[...]



본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com